<template>
	<el-submenu :index="index+''">

		<!--第一层菜单-->
		<template slot="title" v-if="!item.leaf"><i :class="item.iconCls"></i>{{item.title}}</template>
		<!--子菜单-->
		<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden"
			@click.native="selected(child, child.name)">{{child.title}}</el-menu-item>
		<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path" :key="item.children[0].path">
			<i :class="item.iconCls"></i>{{item.children[0].title}}
		</el-menu-item>
		<!--<template v-for="(itemSub,indexSub) in item.children">
			<el-menu-item v-if="itemSub.childModules.length===0" class="menu-level" :index="itemSub.path" :key="indexSub" @click.native="selected(itemSub.name, itemSub.moduleId)">
				<span>{{ itemSub.name }}</span>
				<span v-if="itemSub.badge>0">（{{itemSub.badge}}）</span>
			</el-menu-item>
	 
			<submenu v-else class="menu-level" :item="itemSub" :key="indexSub" @selected="selected" />
		</template>-->
	</el-submenu>
	
	<!--<template v-for="(tabItem,index) in item" v-if="!tabItem.hidden">
		<el-submenu :index="index+''" v-if="!tabItem.leaf">
			<template slot="title"><i :class="tabItem.iconCls"></i>{{tabItem.name}}</template>
			<el-menu-item v-for="child in tabItem.children" :index="child.path" :key="child.path" v-if="!child.hidden"
				 @click.native="selected(child.name, child.moduleId)">{{child.name}}</el-menu-item>
		</el-submenu>
		<el-menu-item v-if="tabItem.leaf&&tabItem.children.length>0" :index="tabItem.children[0].path"><i :class="tabItem.iconCls"></i>{{tabItem.children[0].name}}</el-menu-item>
	</template>-->
	
</template>
<script>
	export default {
		name: 'submenu',
		props: ['item', 'index'],
		methods: {
			selected(tab, moduleId) {
				this.$emit('selected', tab, moduleId)
			}
		}
	}
</script>